<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发送短信倒计时</title>
</head>
<body>
<ul id="smsBox">
    <li><input name="mobile" type="text" id="mobile" placeholder="请填写手机号" maxlength="11" /></li>
    <li><input name="vcode" type="text" id="vcode" placeholder="请填写图形验证码" size="6" /> 6688 </li>
    <li><input type="text" name="mobileCode" id="mobileCode" placeholder="请填写手机验证码" /> </li>
  <li><button id="smsSendBtn">点击获取短信验证码</button></li>
</ul>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
//author :'omyweb@163.com',
 var smsSend = {
	 timing:60,//默认等待60秒
	 button:'',
	 smsApi:'/api/sms/', //改成自己的发送短信的地址
	 /**
	  * 发送短信倒计时
	  * @ param obj  object 对象容器
	  * @ param timing  int 需要等待的时间
	  * @ param func  function 执行后需要执行的函数
	  * 调用方式 smsSend($('#smsBox'<span style="font-family: Arial, Helvetica, sans-serif;">)</span><span style="font-family: Arial, Helvetica, sans-serif;">,60);</span>
	 */
	 init : function(obj,timing,func){
		 if(typeof(obj)!=='object'){
			console.log('缺少对象！');
		    return false;  
		 }
		 
		 this.button = obj.find("#smsSendBtn");
		 if(!this.button){
		    console.log('缺少按钮对象！');
			return false;  
		 }
		 
		 if(timing){
		    this.timing = timing;
		 }
		 
		 var $this = this;
		 
		 this.button.on('click',function(e){
			 
			 e.preventDefault();
			 
			 //判断手机号
		     var mobile = obj.find('#mobile').val();
		     if(!mobile){
			    alert('请填手机号！');
				return false;  
			 }
			 
			 if (!mobile.match(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/)) {
				alert('请填正确的手机号！');
				return false;  
			 }
			 //判断验证码
			 var vcode = obj.find('#vcode').val();
			 if(!vcode){
			    alert('请填写图形验证码！');
				return false;  
			 }
			 
			 //点击是判断是否已处于计时状态 
		     if($(this).hasClass('disabled')){
			    return false;
			 }else{
				//执行发送短信函数！
				$this.sendSms(mobile,vcode,func);
			 }
			 
		 });
		
	 },
	 countdown : function(){
		 var $this = this;
		 var a = this.timing + 1;
		 //检查是否有cookie 数据
		 var i = this.getCookie('countdown'); 
		 
		 if(i>0){
		    a = i;
		 }
		 //alert(i);
		 // 虚拟全局变量
		 return function(){
			 
			 if( a > 0 ){
		         a --;
			 }
			 //把值写cookie 避免刷新后数据丢失 保存60秒
			 $this.setCookie('countdown',a,$this.timing*1000);
			 return a;
		 }
		 ///解除引用来避免内存泄漏
		 a = null;
	 },
	 setBtnTime : function(){
		 //执行倒计时函数
	     var $this = this;
		 
		 var $time = this.countdown();
		 
		 var i = window.setInterval(function(){
			 
			 var t = $time();
			 
			 $this.button.addClass('disabled').attr('disabled',"true").html('重新获取验证码('+t+')');//添加disabled属性 
			 
			 if( t == 0 ){
				 
				$this.button.removeClass('disabled').removeAttr("disabled").html('重新获取验证码'); //移除disabled属性 
				
				//当计时为0 时 删除计时函数；
				window.clearInterval(i);
			 }
			 
		 },1000);
		 
	 },
	 /**
	 * 写 cookies 
	 * @ param  name str cookie名称
	 * @ param  value  cookie 值
	 * @ param  time  int 保存时间（毫秒单位）
	 */
	 setCookie : function(name,value,time){
	    var exp = new Date(); 
		exp.setTime(exp.getTime() + time); 
		document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
	 },
	 /**
	 * 读取 cookies 
	 * param  name  cookie名称
	 */
	 getCookie : function(name){
	     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
		 if(arr=document.cookie.match(reg)){
			return unescape(arr[2]); 
		 }else{ 
			return null; 
		 }
	 },
	 
	 /**
	  * 发送短信
	  * @ param mobile int 手机号
	  * @ param func  function 执行后需要执行的函数
	 */
	 sendSms : function($mobile,$vcode,func){
		 
		 //测试+++++++++++++++++++++++
	     //开始执行计算器函数
		 this.setBtnTime(); 
		 //执行 func
		 if(typeof(func)=='function'){
			func();
		 }
		 //end 测试
		 //+++++++++++++++++++++++++++++
		 
		 /*
		 
		 //开始提交短信发送
		 var $this = this;
		 $.ajax({
			type: 'POST',
			url: $this.smsApi,
			data: {'mobile':$mobile,'code':$vcode},
			dataType: "json",
			beforeSend:function(){
			   //提交前执行
			},
			success:function(data){
				
				 if(data['status']){
					 //短信发送成功后开始倒计时！
					 $this.setBtnTime(); 
					 //执行 func
					 if(typeof(func)=='function'){
						func();
					 }
					 
				 }else{
					//提示返回的错误信息
					alert(data['info']);
				 }
	   
			},
			//调用出错执行的函数
			error: function(){
			  alert('ajax请求目标错误！');
			}         
		});
	    //end 					
		
		*/
	 }
 }

$(function(){
	smsSend.init($('#smsBox'),10,function(){/*alert('我是传过去的函数');*/});
});
</script>
</html>